<template>
	<view class="content">
		<view class="product-detail">
			<image :src="product.url" class="product-image" mode="widthFix"></image>
			<view class="product-info">
				<text class="product-name">{{ product.name }}</text>
				<br />
				<text class="product-description">{{ product.description }}</text>
				<br />
				<text class="product-price">¥{{ product.price }}</text>
			</view>
			<view class="product-actions">
				<button class="add-to-cart" @click="addToCart">加入购物车</button>
				<button class="buy-now" @click="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background-color: #f2f4f5;
		padding: 10px;
		box-sizing: border-box;
	}

	.product-detail {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 20px;
		box-sizing: border-box;
	}

	.product-image {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 10px;
	}

	.product-info {
		width: 100%;
		text-align: center;
		margin-top: 20px;
		box-sizing: border-box;
	}

	.product-name {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.product-description {
		width: 80%;
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.product-price {
		font-size: 30px;
		color: #f14048;
		margin-bottom: 10px;
	}

	.product-actions {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 20px;
		box-sizing: border-box;
	}

	.add-to-cart,
	.buy-now {
		font-size: 16px;
		color: white;
		background-color: #f14048;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		cursor: pointer;
		box-sizing: border-box;
	}

	.buy-now {
		background-color: #ff6600;
	}
</style>
<script>
	export default {
		data() {
			return {
				product: {
					id: '',
					name: '',
					description: '',
					price: '',
					url: ''
				}
			};
		},
		onLoad(options) {
			this.product.id = options.id;
			this.product.name = decodeURIComponent(options.name);
			this.product.description = decodeURIComponent(options.description);
			this.product.price = options.price;
			this.product.url = decodeURIComponent(options.url);
		},
		methods: {
			addToCart() {
				let storedProducts = wx.getStorageSync('product');
				if (!Array.isArray(storedProducts)) storedProducts=[];
				const foundIndex = storedProducts.findIndex(item => item.id === this.product.id);

				if (foundIndex !== -1) {
					storedProducts[foundIndex].quantity += 1;
				} else {
					storedProducts.push({
						...this.product,
						quantity: 1
					});
				}

				wx.setStorageSync('product', storedProducts);
				wx.switchTab({
					url: '/pages/shoppingcart/shoppingcart'
				});
			},
			buyNow() {
				wx.setStorageSync('product', {
					id: this.product.id,
					name: this.product.name,
					description: this.product.description,
					price: this.product.price,
					url: this.product.url
				});
				uni.navigateTo({
					url: '/pages/sureorder/sureorder'
				});
			}
		}
	};
</script>
